<template>
	<view>
		<view class="w-1 fr-c s-outer" style="background: #FFFFFF;">
			<view class="search-box fr-b-c" style="padding-left: 36rpx; padding-right: 6rpx;">
				<image src="/static/images/user/search_icon.png" style="width: 34rpx; height: 34rpx;"></image>
				<input  type="text" focus placeholder-style="color: #CCCCCC;" v-model="keyword" confirm-type="search"
					 class="flex-1 s-input" @confirm="getSearch" placeholder="输入关键字搜索门店" />
				<view class="fr-c search-btn m-l-20" @click="getSearch">搜索</view>
			</view>
		</view>
		<view class="w-1">
			<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0" v-for="(item, index) in list" style="align-items:unset;" @click="chooseStore(item)">
				
				<image :src="item.avatar" mode="aspectFill"></image>
				<view style="width: 100%;height:66px;overflow: hidden;padding-right: 20px;">
					<view class="u-line-1" style="height:50%;">{{ item.shopname }}</view>
					<view class="u-line-1" style="height:50%;text-align: right;font-size:13px;line-height: 40px;">{{ item.return }}</view>
				</view>
			</view>
		</view>
		<view class="m-t-250" v-if="nodata">
			<u-empty mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				keyword: '',
				list: [],
				nodata:false,
				count:0,
			}
		},
		created() {
		},
		onReachBottom() {
			console.log('----')
			if(this.list.length < this.count){
				this.page++
				this.searInfo()
			}
		},
		onLoad() {
			this.searInfo()
		},
		
		methods: {
			chooseStore(store) {
					uni.$emit('onStore',store)
					uni.navigateBack()
			},
			searInfo() {
				this.$get({
					url:'/wanlshop/store/index',
					data:{
						keyword:this.keyword,
						page:this.page
					},
				}).then(res=>{
					this.list = this.page==1?res.data.data:[...this.list,...res.data.data]
					this.nodata = !this.list.length
					this.count = res.data.total
				}).catch(err=>{
					this.list = []
					this.nodata = !this.list.length
					this.count = 0
				})
			},
			getSearch(){
				this.page = 1
				this.list = []
				this.searInfo()
			}
		}
	}
</script>

<style scoped>
.s-outer{
	position: sticky;
	top: 0;
	left: 0;
	z-index: 9999;
	padding: 20rpx 0;
}
.search-box {
		width: 686rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 2rpx solid #FA360A;
		margin: auto;
	}
	.shangjia-bottom{
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #E56D31;
		margin-top: 12rpx;
		padding: 0 10rpx;
	}
.search-btn {
		width: 142rpx;
		height: 60rpx;
		background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		font-size: 26rpx;
		font-family: Alibaba;
		color: #FFFFFF;
	}

	.s-input {
		font-size: 26rpx;
		font-family: Alibaba;
		color: #CCCCCC;
		margin-left: 6rpx;
	}
	
		
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
		margin: 10rpx 0rpx;
		border-bottom: 1px solid #CCCCCC;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
		margin-right: 12rpx;
	}
	/* .u-flex {
			flex-direction: row-reverse;
	} */
</style>
